<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<title>信息管理系统</title>

		<style type="text/css">
			#sider {
				position: absolute;
				top: 0;
				left: 5px;
				bottom: 0px;
				width: 260px;
				border: 2px solid #DEDFDF;
			}
		</style>
	</head>

	<body>
		<div id="container">
			<div id="sider">
				<div style="background-color: #EEEEEE;height: 30px;padding-top: 10px;">
					<span style="color:#00B83F" class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#myModal1"></span>&nbsp;<span>增加</span>&nbsp;&nbsp;
					<span style="color: white;" class="glyphicon glyphicon-list-alt" data-toggle="modal" onclick="dome()" id="update" data-target="#myModal2"></span>&nbsp;<span>编辑</span>&nbsp;&nbsp;
					<span style="color: red;" class="glyphicon glyphicon-remove" onclick="" id="delete"></span>&nbsp;<span>删除</span><a id="dela"></a>&nbsp;&nbsp;
					<span style="color: blue" class="glyphicon glyphicon-refresh s" id="s"></span>&nbsp;<span>刷新</span>
				</div>
				<table class="table  table-condensed" >

					<tr class="hh" id="shou">
						<th>属性名称</th>
						<th>属性类型</th>
						<th>是否权限</th>
					</tr>

					<tr th:each="p:${prop}">
						<td th:text="${p.id}" style="display:none;" id="tdr"></td>
						<td th:text="${p.propertyName}">Tanmay</td>
						<td th:text="${p.genre}"></td>
						<td th:if="${p.jurisdiction}==0">否</td>
						<td th:if="${p.jurisdiction}==1">是</td>
					</tr>

				</table>
			</div>
		</div>

		<div style="margin-left:265px ;">
			<div style="background-color: #EEEEEE;height: 30px;padding-top: 10px;">
				<span style="color:#00B83F" class="glyphicon glyphicon-plus" data-toggle="modal" id="propertylist1" data-target="#myModal8"></span>&nbsp;<span>增加</span>&nbsp;&nbsp;
				<span style="color: white;" class="glyphicon glyphicon-list-alt" data-toggle="modal" data-target="#myModal9" id="propertylist2"></span>&nbsp;<span>编辑</span>&nbsp;&nbsp;
				<span style="color: red;" class="glyphicon glyphicon-remove"  id="deletes"></span>&nbsp;<span>删除</span><a id="delss"></a>&nbsp;&nbsp;
				<span style="color: blue" class="glyphicon glyphicon-refresh s"></span>&nbsp;<span>刷新</span>
			</div>
			<table id="tabletwo" class="table table-bordered">

					<tr id="ttt">
						<th>代码</th>
						<th>名称</th>
					</tr>

				<tbody id="dd">

				</tbody>
			</table>

		</div>


		<div class="modal fade" id="myModal9" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							编辑
						</h4>
					</div>
					<form th:action="@{/listsaves}" method="post">
						<div class="modal-body">

							<div class="form-group">
								<label for="name">编码</label>
								<input type="hidden"  id="ids"  name="id"/>
								<input type="hidden" id="propertyids" name="propertyid"/>
								<input type="text" class="form-control" id="codes" name="code"  placeholder="请输入编码">
							</div>
							<div class="form-group">
								<label for="name">名称</label>
								<input type="text" class="form-control" name="name" id="names"  placeholder="请输入名称">
							</div>


						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
							<button type="submit" class="btn btn-primary">
								提交更改
							</button>
						</div>
					</form>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>


		<!--模块一新增-->
		<div class="modal fade" id="myModal8" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							新增
						</h4>
					</div>
					<form th:action="@{/propertylistadd}" method="post">
						<div class="modal-body">
							<input type="hidden" name="propertyid" id="propertylistpropertyid"/>
							<div class="form-group">
								<label for="name">编码</label>
								<input type="text" class="form-control"  name="code" placeholder="请输入编码">
							</div>
							<div class="form-group">
								<label for="name">名称</label>
								<input type="text" class="form-control"  name="name" placeholder="请输入名称">
							</div>

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
							<button type="submit" class="btn btn-primary">
								提交
							</button>
						</div>
					</form>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>















		<!--模块一新增-->
		<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
						<h4 class="modal-title" id="myModalLabel">
					新增
				</h4>
					</div>
					<form th:action="@{/propertyadd}" method="post">
						<div class="modal-body">

							<div class="form-group">
								<label for="name">名称</label>
								<input type="text" class="form-control" id="name" name="propertyName" placeholder="请输入名称">
							</div>
							<div class="form-group">
								<label for="name">类型</label>
								<select class="form-control" name="genre">
									<option value="列表">列表</option>
								</select>
							</div>

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
							<button type="submit" class="btn btn-primary">
					提交
				</button>
						</div>
					</form>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		<!--模块一编辑-->
		<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
						<h4 class="modal-title" id="myModalLabel">
					编辑
				</h4>
					</div>
					<form th:action="@{/propertysave}" method="post">
						<div class="modal-body">

							<div class="form-group">
								<label for="name">名称</label>
								<input type="hidden" name="configId" id="configid"/>
								<input type="hidden" id="propertyid"  name="id"/>
								<input type="text" class="form-control" name="propertyName" id="propertyname" placeholder="请输入名称">
							</div>
							<div class="form-group">
								<label for="name">类型</label>
								<select class="form-control" name="genre">
									<option>列表</option>
								</select>
							</div>
								<div class="form-group">
								<label for="name">权限</label>
								<select class="form-control" name="jurisdiction" id="propertyselect">

								</select>
							</div>

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
							<button type="submit" class="btn btn-primary">
					提交更改
				</button>
						</div>
					</form>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>

	</body>

</html>
<script>
	
    $("#propertylist1").click(function () {
        var id=$("[class='active']").children("#tdr").text();
        $("#propertylistpropertyid").val(id);
    });

    // $("tr").click(function() {
    //     alert("wfwefwef")
    //     // var id=$(this).children("#tdr").text();
    //     // alert(id)
    //     // // var url="/listupdate";
    //     // // var params="id="+pp;
    //     // // $.post(url,params,function (data) {
    //     // //     alert(data);
    //     // //
    //     // // });
    //     // $(this).prop("class", "active")
    //     //     .siblings().removeClass('active') //去除其他项的高亮形式
    // });


	

	$(function () {
		$("#shou+tr").click();
        var id=$("[class='active']").children(".ppp").text();
        if(id==""){
            $("#propertylist2").attr("data-target","");
            $("#propertylist2").prop("style","color:burlywood");
            $("#deletes").attr("onclick","")
			$("#deletes").prop("style","color:burlywood")
		}else{

		}


    });
function dome(){
    var id=$("[class='active']").children("#tdr").text();
	var url="/PropertyUpdate";
	var params="id="+id;

	$.post(url,params,function (data) {
		$("#propertyid").val(data.id);
		$("#configid").val(data.configId)
		$("#propertyname").val(data.propertyName);
		var select;
		if(data.jurisdiction==0){
		    select+="<option value='0' selected>否</option>";
            select+="<option value='1'>是</option>";
		}else{
            select+="<option value='1' selected>是</option>";
            select+="<option value='0'>否</option>";
		}

		$("#propertyselect").html(select);
    });

}

function  del() {
    var id=$("[class='active']").children(".ppp").text();
    if(window.confirm('你确定要删除吗？')){
        $("#delss").attr("href","/listdel?id="+id);
        document.getElementById("delss").click();
        return true;
    }else{
        return false;
    }

}


function list(data){
    $("#propertylist2").attr("data-target","#myModal9");
    $("#propertylist2").prop("style","color:#00B83F");
    $("#deletes").attr("onclick","del()");
    $("#deletes").prop("style", "color:#FF1493")
    var id=$("[class='active']").children("#tdr").text();
   $("[name="+data+"]").prop("class","active")
       .siblings().removeClass('active')

   var url="/listsave";
   var params="id="+data;
   $.post(url,params,function (date) {
	   $("#ids").val(date.id)
	   $("#codes").val(date.code)
	   $("#names").val(date.name)
	   $("#propertyids").val(id)
   })





}




	$(".hh~tr").click(function() {
        $("#propertylist2").attr("data-target","");
        $("#propertylist2").prop("style","color:burlywood");
        $("#deletes").attr("onclick","")
        $("#deletes").prop("style","color:burlywood")
        var pp=$(this).children("#tdr").text();
        var url="/list";
        var params="id="+pp;
		$.post(url,params,function (data) {
            var html = '';
            for ( var i = 0; i < data.length; i++) {
                //循环json对象，拼接tr,
							html = html + "<tr name=\"" + data[i].id+ "\" onclick='list(\""+data[i].id+"\")' >";
							html = html + '<td>' + data[i].code + '</td>';
							html = html + '<td>' + data[i].name + '</td>';
							html = html + "<td style='display:none' class='ppp'>" + data[i].id + '</td>';
							html = html + '</tr>';
            }
            $('#dd').html(html);
        });
		$(this).prop("class", "active")
			.siblings().removeClass('active') //去除其他项的高亮形式
	});




	$("#delete").click(function(){
		if(window.confirm('你确定要删除吗？')){
            var id=$("[class='active']").children("#tdr").text();

            $("#dela").attr("href","/delete?id="+id);
            $("#dela").click();
            document.getElementById("dela").click();
                 return true;
              }else{
                 return false;
             }
	})
	$(".s").click(function(){
		window.location.reload();
	})
</script>